<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <%--    导入全选和反选的js--%>
    <script type="text/javascript" src="js/commons.js"></script>

    <!--  PAGINATION plugin -->
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        $(function () {

            // const axios = require('axios').default;


            //当容器加载完成，对容器调用工具函数
            $(".mydate").datetimepicker({
                language: 'zh-CN',//语言
                format: 'yyyy-mm-dd',//日期格式
                minView: 'month',//日期选择器上最小能选择的日期的视图
                initialDate: new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
                autoclose: true,//选择日期之后，是否自动关闭日历
                todayBtn: true,//是否显示当前日期的按钮
                clearBtn: true,//是否显示清空按钮
            });
            //页面初始化的时候就查询
            getActivityForPageByCondition(1, 3);

            //给查询按钮绑定单击事件
            $("#queryActivityBtn").on("click", function () {
                //清空选择框
                $("#chkedAll").prop("checked", false);
                getActivityForPageByCondition(1, 3);
            });

            //给重置按钮绑定单击事件
            $("#resetActivityBtn").on("click", function () {
                //清空选择框
                $("#chkedAll").prop("checked", false);
                //清空查询
                $("#query-name").val("");
                $("#query-owner").val("");
                $("#query-startDate").val("");
                $("#query-endDate").val("");
                getActivityForPageByCondition(1, 3);
            })

            //给创建按钮绑定单击事件
            $("#createActivityBtn").on("click", function () {
                // 清空模态窗口的数据
                $("#activityForm")[0].reset()

                //将创建的模态窗口展示出来
                $("#createActivityModal").modal("show");
                //查询所有者数据
                $.ajax({
                    url: "settings/qx/user/getAllUserList.do",
                    type: "get",
                    success: function (data) {
                        //创建html拼接字符串
                        var htmlStr = "<option>----------请选择-----------</option>"
                        $.each(data, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.name + "</option>";
                        })
                        //将数据放到列表中
                        $("#create-marketActivityOwner").html(htmlStr);
                    }
                })
            });

            //给修改按钮绑定单击事件
            $("#editActivityBtn").on("click",function () {
                //获取市场活动的id
                let idList = $("tBody input:checked");

                //判断选中的数据是否大于1
                if (idList.length !== 1){
                    alert("每次只能修改1条数据");
                    return;
                }

                //打开模态窗口
                $("#editActivityModal").modal("show");

                //获取id
                let id = $.trim(idList.val());

                //发送ajax请求获取所有所有者数据
                //发送ajax请求获取市场活动的数据
                $.ajax({
                    url:"workbench/activity/editActivityPage.do",
                    data:{
                        id:id
                    },
                    type:"get",
                    success:function (data) {
                        //将数据放到对应的框中
                        //创建html拼接字符串
                        var htmlStr = "";
                        $.each(data.userList, function (index, item) {
                            htmlStr += "<option value=\"" + item.id + "\">" + item.name + "</option>";
                        })
                        //将数据放到对应的框中
                        var activity = data.activity;

                        // $("#edit-marketActivityOwner").html(htmlStr);
                        $("#edit-marketActivityOwner").val(activity.owner);
                        $("#edit-id").val(activity.id);
                        $("#edit-marketActivityName").val(activity.name);
                        $("#edit-startDate").val(activity.startDate);
                        $("#edit-endDate").val(activity.endDate);
                        $("#edit-description").val(activity.description);
                        $("#edit-cost").val(activity.cost);
                    }
                })

                //给更新按钮绑定单击事件
                $("#saveEditActivityBtn").on("click",function () {
                    //获取数据
                    var owner = $("#edit-marketActivityOwner").val();
                    var id = $("#edit-id").val();
                    var name = $("#edit-marketActivityName").val();
                    var startDate = $("#edit-startDate").val();
                    var endDate = $("#edit-endDate").val();
                    var description = $("#edit-description").val();
                    var cost = $("#edit-cost").val();

                    if (cost<0){
                        alert("价格不得小于0!");
                        return;
                    }
                    //发送ajax请求保存
                    $.ajax({
                        url:"workbench/activity/editActivity.do",
                        data:{
                            id:id,
                            owner:owner,
                            name:name,
                            startDate:startDate,
                            endDate:endDate,
                            description:description,
                            cost:cost
                        },
                        type:"post",
                        success:function (data) {
                            if (data.code === 1){
                                //关闭窗口
                                $("#editActivityModal").modal("hide");
                                //将选中的按钮取消
                                $("tBody input:checked").prop("checked",false);

                                //刷新界面数据
                                getActivityForPageByCondition($("#demo_pag1").bs_pagination("getOption", "currentPage"),$("#demo_pag1").bs_pagination("getOption", "rowsPerPage"))
                            }else{
                                alert(data.message);
                            }
                        }
                    })

                })



            })

            //给保存按钮绑定单击事件
            $("#saveCreateActivityBtn").on("click", function () {
                //获取值
                var name = $("#create-marketActivityName").val();
                var owner = $("#create-marketActivityOwner").val();
                var startDate = $("#create-startDate").val();
                var endDate = $("#create-endDate").val();
                var cost = $("#create-cost").val();
                var description = $("#create-description").val();

                //必填项判空
                if ('----------请选择-----------' === owner) {
                    alert("请选择所有者");
                    return;
                }
                if ('' === name) {
                    alert("请输入活动名称")
                    return;
                }
                //判断价格是否符合格式

                // var pattern = '/^\s*(?=.*[0-9])\d*(?:\.\d{1,2})?\s*$/';
                // var pattern = '/^\s*(?=.*[0-9])\d*(?:\.\d{1,2})?\s*$/';
                if (cost < 0) {
                    alert("价格必须大于0");
                    return;
                }
                // if (!pattern.match(cost)){
                //     alert("价格必须大于0且最多两位小数!");
                //     return;
                // }
                //发送ajax请求
                $.ajax({
                    url: "workbench/activity/saveActivity.do",
                    data: {
                        name: name,
                        owner: owner,
                        cost: cost,
                        description: description,
                        startDate: startDate,
                        endDate: endDate
                    },
                    type: "post",
                    success: function (data) {
                        if (data.code === 1) {

                            //关闭模态窗口
                            $("#createActivityModal").modal("hide");
                            //刷新界面
                            getActivityForPageByCondition(1, $("#demo_pag1").bs_pagination("getOption", "rowsPerPage"));

                        } else {
                            alert(data.message);
                        }
                    }
                })


            });

            //给删除按钮绑定单击事件
            $("#deleteActivityBtn").on("click",function () {

                //获取选中的id
                let idList = $("tBody input:checked");

                //判断是否大于1
                if (idList.size() === 0){
                    alert("删除数据必须大于0!");
                    return;
                }

                //确认删除
                if (!confirm("您确定要删除这" + idList.size() + "条数据?")){
                    alert("您已经取消删除数据");
                }

                //拼接字符串
                var ids = "";
                $.each(idList,function (index,item) {
                    ids += "id="+$.trim(item.value) + "&";
                })

                //取消最后一个符号
                ids = ids.substring(0,ids.length-1);
                //发送ajax请求删除
                $.ajax({
                    url:"workbench/activity/deleteActivity.do",
                    data:ids,
                    type:"get",
                    success:function (data) {
                        if (data.code === 1){
                            alert("删除成功!");
                            //刷新页面
                            getActivityForPageByCondition(1, $("#demo_pag1").bs_pagination("getOption", "rowsPerPage"));
                            $("#chkedAll").prop("checked",false);
                        }else{
                            alert(data.message);
                        }
                    }
                })
            })

            //给批量导出创建单击事件
            $("#exportActivityAllBtn").on("click",function () {
                let idList = $("#tBody input:checked");
                if (idList.size() === 0){
                    alert("导出的数据为空！");
                    return;
                }
                //同步请求，获取流
                window.location.href = "workbench/activity/exportActivity.do"
            })
            //给选择导出创建单击事件
            $("#exportActivityXzBtn").on("click",function () {
                //获取删除的数据
                let idList = $("#tBody input:checked");
                if (idList.size() === 0){
                    alert("导出的数据为空！");
                    return;
                }
                //拼接删除的字符串
                var ids = "";
                $.each(idList,function (item,data) {
                    ids += "id="+$.trim(data.value)+"&";
                });
                //删除最后一个符号
                ids = $.trim(ids.substring(0,ids.length-1));

                //同步请求，获取流
                window.location.href = "workbench/activity/exportActivityXz.do?"+ids;
            })

            //给导入文件创建单击事件
            $("#importActivityListBtn").on("click",function () {

                //将模态窗口打开
                $("#importActivityModal").modal(true);
            })

            //给导入按钮绑定单击事件按
            $("#importActivityBtn").on("click",function () {
                //获取文件名称
                var filePathName = $("#activityFile").val();
                //判断文件是否为xls文件
                //获取文件后缀
                var suffix = filePathName.substring(filePathName.lastIndexOf(".")+1).toLowerCase();

                if ("xls" !== suffix){
                    alert("只能上传xls格式文件");
                    return;
                }

                //判断文件是否过大
                //获取源文件
                var file = $("#activityFile")[0].files[0];
                var filesize = file.size;
                if (filesize > 5 * 1024 * 1024){
                    alert("不能上传超过5MB的文件");
                    return;
                }

                //创建表单对象
                let formDate = new FormData();
                formDate.append("myFile",file);

                //ajax上传文件
                $.ajax({
                    url:"workbench/activity/importActivityXz.do",
                    type:"post",
                    processData:false,
                    contentType:false,
                    data:formDate,
                    success:function (data) {
                        if (data.code === 1){
                            alert("上传成功");
                            //关闭模态窗口
                            $("#importActivityModal").modal("hide");

                            getActivityForPageByCondition(1, $("#demo_pag1").bs_pagination("getOption", "rowsPerPage"));
                        }
                        else{
                            alert(data.message);
                        }
                    }
                })
            })


        });

        /**
         * 分页带条件查询
         * @param pageNo 页码
         * @param limit 每页限制条数
         */
        function getActivityForPageByCondition(pageNo, limit) {
            //获取参数
            var name = $("#query-name").val();
            var owner = $("#query-owner").val();
            var startDate = $("#query-startDate").val();
            var endDate = $("#query-endDate").val();

            $.ajax({
                url: "workbench/activity/getActivityForPageByCondition.do",
                type: "post",
                data: {
                    activityName: name,
                    userName: owner,
                    startDate: startDate,
                    endDate: endDate,
                    pageNo: pageNo,
                    limit: limit
                },
                success: function (data) {
                    var list = data.activityList

                    //拼接html
                    var htmlStr = "";
                    $.each(list, function (index, item) {
                        htmlStr += "<tr class=\"active\">";
                        htmlStr += "<td><input type=\"checkbox\" value=\" " + item.id + "\" /></td>";
                        htmlStr += "<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/activityDetail.do?id="+item.id+"'\">" + item.activityName + "</a>"
                        htmlStr += "</td>"
                        htmlStr += "<td>" + item.userName + "</td>";
                        htmlStr += "<td>" + item.startDate + "</td>";
                        htmlStr += "<td>" + item.endDate + "</td>";
                    });
                    //将数据放到div中
                    $("#tBody").html(htmlStr);

                    //当成功查询到数据之后就加载分页
                    $("#demo_pag1").bs_pagination({
                        currentPage: pageNo,//当前页

                        rowsPerPage: limit,//每页显示条数
                        totalRows: data.total,//总条数
                        totalPages: data.pageTotal,//总页数

                        visiblePageLinks: 5,//显示的翻页卡片数

                        showGoToPage: true,//是否显示"跳转到第几页"
                        showRowsPerPage: true,//是否显示"每页显示条数"
                        showRowsInfo: true,//是否显示"记录的信息"

                        //每次切换页号都会自动触发此函数，函数能够返回切换之后的页号和每页显示条数
                        onChangePage: function (e, pageObj) { // returns page_num and rows_per_page after a link has clicked
                            //清空选择框
                            $("#chkedAll").prop("checked", false);
                            //查询
                            getActivityForPageByCondition(pageObj.currentPage, pageObj.rowsPerPage);
                        }
                    });
                }
            })
        }

        /**
         * 当点击市场活动行的时候，跳转到市场活动具体信息页面
         */
        function activityDetailPage(id){
            alert(2);
            window.location.href = "workbench/activity/activityDetailPage.do?"+id;
        }




    </script>
</head>
<body>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="activityForm">

                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-marketActivityOwner">
                                <%--所有者数据--%>
                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-marketActivityName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control mydate" id="create-startDate"
                            >
                        </div>
                        <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control mydate" id="create-endDate"
                            >
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveCreateActivityBtn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>

                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">
                    <input type="hidden" id="edit-id">
                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-marketActivityOwner">

                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startDate" class="col-sm-2 control-label" readonly>开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="edit-startDate" value="2020-10-10" readonly>
                        </div>
                        <label for="edit-endDate" class="col-sm-2 control-label" readonly>结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="edit-endDate" value="2020-10-20" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost" value="5,000">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-description">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveEditActivityBtn" type="button" class="btn btn-primary">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
            </div>
            <div class="modal-body" style="height: 350px;">
                <div style="position: relative;top: 20px; left: 50px;">
                    请选择要上传的文件：<small style="color: gray;">[仅支持.xls格式]</small>
                </div>
                <div style="position: relative;top: 40px; left: 50px;">
                    <input type="file" id="activityFile">
                </div>
                <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;">
                    <h3>重要提示</h3>
                    <ul>
                        <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                        <li>给定文件的第一行将视为字段名。</li>
                        <li>请确认您的文件大小不超过5MB。</li>
                        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                        <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                        <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>


<%--页面--%>
<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="query-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="query-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control" type="date" id="query-startDate"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control" type="date" id="query-endDate">
                    </div>
                </div>

                <button id="queryActivityBtn" type="button" class="btn btn-default">查询</button>
                <button id="resetActivityBtn" type="button" class="btn btn-default">重置</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button id="createActivityBtn" type="button" class="btn btn-primary"><span
                        class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button id="editActivityBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button id="deleteActivityBtn" type="button" class="btn btn-danger"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>
            <div class="btn-group" style="position: relative; top: 18%;">
                <button id="importActivityListBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-import"></span> 上传列表数据（导入）
                </button>
                <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）
                </button>
                <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）
                </button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="chkedAll"/></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="tBody">

                </tbody>
            </table>
            <!--创建容器-->
            <div id="demo_pag1"></div>
        </div>


    </div>

</div>


</body>
</html>